<template>
  <el-form class="detail-info" label-width="130px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="父订单号:">
          <span>{{ orderInfo.parent_order_no }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="订单号:">
          <span>{{ orderInfo.order_no }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户ID:">
          <el-button size="small" type="text" @click="handleUserDetail">{{orderInfo.user_id}}</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户昵称:">
          <span>{{ orderInfo.user_nick }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="注册账号:">
          <span>{{ orderInfo.reg_account }}</span>
        </el-form-item>
      </el-col>
     <el-col :span="12">
        <el-form-item label="注册渠道:">
          <span>{{ orderInfo.channel_id | translateToName(channelOptions, 'channel_id', 'name') }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="支付入口:">
          <span>{{ orderInfo.pay_entry }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="支付方式:">
          <el-tag :type="orderInfo.pay_type === 2 ? 'success':orderInfo.pay_type === 2?'' :'info'"
            disable-transitions>{{ typeFormat(orderInfo) }}</el-tag>
        </el-form-item>
      </el-col>
     <el-col :span="12">
        <el-form-item label="订单名称:">
          <span>{{ orderInfo.product_name }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="订单金额:">
          <span>{{ orderInfo.currency_code==='USD' ? '$':'￥' }}{{ orderInfo.pay_price | formatMoney}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="创建订单时间:">
          <span>{{ orderInfo.create_time }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="支付订单时间:">
          <span>{{ orderInfo.pay_time }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="退款创建时间:">
          <span>{{ orderInfo.refund_at }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="取消订单时间:">
          <span>{{ orderInfo.expire_at }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="取消订单原因:">
          <span>{{ orderInfo.cancel_reason }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="状态:">
          <el-tag :type="orderStatus.get(orderInfo.status).tagType">{{ orderStatus.get(orderInfo.status).desc }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="签约状态:">
          <template v-if="agreeOrderStatus.get(orderInfo.agreement_status)">
            <el-tag :type="agreeOrderStatus.get(orderInfo.agreement_status).tagType" disable-transitions>
              {{ agreeOrderStatus.get(orderInfo.agreement_status).desc }}
            </el-tag>
          </template>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="签约时间:">
          <span>{{ orderInfo.signed_at }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="解约时间:">
          <span>{{ orderInfo.unsigned_at }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="orderInfo.related_parent_order_id">
        <el-form-item :label="orderInfo.status===2?'退款订单号:':'原订单号:'">
          <span>{{ orderInfo.related_parent_order_id }}</span>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getOrderStatus, getAgreeOrderStatus } from '@/constants/constant'
export default {
  name: 'OrderDetail',
  props: {
    orderInfo: {
      type: Object,
      require: true
    },
    payTypeOptions: {
      type: Array,
      default: () => []
    },
    channelOptions: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      orderStatus: undefined
    }
  },
  created () {
    this.orderStatus = getOrderStatus()
    this.agreeOrderStatus = getAgreeOrderStatus()
  },
  computed: {
  },
  methods: {
    // 支付方式内置字典翻译
    typeFormat (row, column) {
      return this.selectDictLabel(this.payTypeOptions, row.pay_type)
    },
    handleUserDetail () {
      this.$emit('handleUserDetail', this.orderInfo)
    }
  }
}
</script>
<style lang="scss" scoped>
  h5{
      line-height: 30px;
      font-size: 16px;
  }
</style>
